{% extends 'base.html' %}
{% load staticfiles %}

{% block my_css %}
    <link rel="stylesheet" href="{% static 'css/index.css' %}">
{% endblock %}

<title>{% block title %}总控制台{% endblock %}</title>

{% block nav_index %}active-nav{% endblock %}

{% block content %}
    <div class="layui-fluid">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-sm6">
                <div class="data-tv-1" id="index-left-height">
                    <div class="col-3">
                        <div class="layui-fluid">
                            <div class="layui-row layui-col-space20">
                                <div class="layui-col-sm4">
                                    <div class="col color1">
                                        <img src="{% static 'images/index-1.png' %}" alt="">
                                        <p>预警总数</p>
                                        {% if perms.warnlist.view_warntype %}
                                            <a href="{% url 'warnlist:warn_list' %}">{{ warn_sum }}</a>
                                        {% else %}
                                            <a>{{ warn_sum }}</a>
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="layui-col-sm4">
                                    <div class="col color2">
                                        <img src="{% static 'images/index-2.png' %}" alt="">
                                        <p>已完成</p>
                                        {% if perms.warnlist.view_warntype %}
                                            <a href="{% url 'warnlist:sum_list' %}?#warn-tab=2">125</a>
                                        {% else %}
                                            <a>125</a>
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="layui-col-sm4">
                                    <div class="col color3">
                                        <img src="{% static 'images/index-3.png' %}" alt="">
                                        <p>已丢弃</p>
                                        {% if perms.warnlist.view_warntype %}
                                            <a href="{% url 'warnlist:sum_list' %}?#warn-tab=3">96</a>
                                        {% else %}
                                            <a>96</a>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6">
                <div class="layui-row layui-col-space10" id="change-warn">
                    <!-- 这里是异步加载最新预警信息 -->
                </div>
            </div>
        </div>
    </div>

    <div class="layui-fluid">
        <div class="layui-row index-body layui-col-space10">
            <div class="layui-col-sm4">
                <div class="echarts-bar index-middle" id="echarts-bar2">

                </div>
                <div class="echarts-bar1 index-middle1" id="echarts-bar1">

                </div>
                <div class="title-bar">
                    <ul>
                        <li>
                            <span class="bar-color1"></span>
                            <strong>周界入侵</strong>
                            <p id="big"></p>
                        </li>
                        <li>
                            <span class="bar-color2"></span>
                            <strong>未穿工装</strong>
                            <p id="small"></p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="layui-col-sm4">
                <div class="echarts-broken index-middle" id="echarts-broken">

                </div>
            </div>
            <div class="layui-col-sm4">
                <div class="echarts-pillar">
                    <div class="index-middle" id="echarts-pillar">

                    </div>
                    <div class="title-pillar">
                        <ul>
                            <li>
                                <span class="title-color1"></span>
                                <strong id="event1"></strong>
                                <p>疑似事件</p>
                            </li>
                            <li>
                                <span class="title-color2"></span>
                                <strong id="event2"></strong>
                                <p>正常上报</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-sm6">
                <!-- 折线图 -->
                <div class="data-tv-2 echarts-color">
                    <div class="layui-tab" lay-filter="line-echarts">
                        <div class="count-1">
                            <p>预警任务处理情况</p>
                            <ul class="layui-tab-title">
                                <li class="layui-this">今天</li>
                            </ul>
                        </div>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <br>
                                <div class="echarts-line" id="echarts-line0">

                                </div>
                            </div>
                            <div class="layui-tab-item">
                                <br>
                                <div class="echarts-line" id="echarts-line1">

                                </div>
                            </div>
                            <div class="layui-tab-item">
                                <br>
                                <div class="echarts-line" id="echarts-line2">

                                </div>
                            </div>
                            <div class="layui-tab-item">
                                <br>
                                <div class="echarts-line" id="echarts-line3">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6">
                <!-- 柱状图 -->
                <div class="data-tv-2 echarts-color">
                    <div class="layui-tab" lay-filter="column-echarts">
                        <div class="count-1">
                            <p>预警类型发生情况</p>
                            <ul class="layui-tab-title">
                                <li class="layui-this">今天</li>
                            </ul>
                        </div>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <br>
                                <div class="echarts-line" id="echarts-column0">
                                </div>
                            </div>
                            <div class="layui-tab-item">
                                <br>
                                <div class="echarts-line" id="echarts-column1">

                                </div>
                            </div>
                            <div class="layui-tab-item">
                                <br>
                                <div class="echarts-line" id="echarts-column2">

                                </div>
                            </div>
                            <div class="layui-tab-item">
                                <br>
                                <div class="echarts-line" id="echarts-column3">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 标注图片展示 -->
    {#    <div class="warn-image" id="view-image" style="display: none">#}
    {#        <canvas id="canvasId">#}
    {##}
    {#        </canvas>#}
    {#    </div>#}

    <!-- 弹窗筛选-时间筛选1 -->
{#    <div id="layer-time" style="display: none">#}
{#        <form class="layui-form" onclick="return false">#}
{#            <div class="layui-form-item">#}
{#                <div class="layui-input-block">#}
{#                    <input type="text" placeholder="请点击选择日期" class="layui-input" id="times">#}
{#                </div>#}
{#            </div>#}
{#        </form>#}
{#    </div>#}

{% endblock %}

{% block my_js %}

    <script type="text/html" id="index-warn">
        {% verbatim %}

        {{ each data warn index }}
        <div class="layui-col-sm3">
            <div class="index-warn" id="index-warn-1">
                <div class="index-warn-1" id="index-img{{ index }}">
                    <img src="{{ warn.image }}" alt="" onclick='view_image({{ warn.id }})' ;>
                </div>
                <div class="index-warn-2">
                    <span>{{ warn.add_time }}</span>
                </div>
            </div>
        </div>
        {{ /each }}

        {% endverbatim %}
    </script>

    <script type="text/html" id="small-data">{% verbatim %}35.4%{% endverbatim %}</script>

    <script type="text/html" id="big-data">{% verbatim %}64.6%{% endverbatim %}</script>

    <script type="text/html" id="event-data1">{% verbatim %}256{% endverbatim %}</script>

    <script type="text/html" id="event-data2">{% verbatim %}322{% endverbatim %}</script>

    <script src="{% static 'js/template-web.js' %}"></script>
    <script src="{% static 'js/data-tv.js' %}"></script>
    <script src="{% static 'js/index.js' %}"></script>
    <script src="{% static 'js/echarts.js' %}"></script>
    <script src="{% static 'js/theme.js' %}"></script>

    <script>
        // 屏幕尺寸变化,刷新页面
        $(window).resize(function () {
            window.location.reload();
        });

    </script>

{% endblock %}
